<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        
        #box2{
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        
        #box3{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3"></div>
        </div>
    </div>

    <script>
        /* 
            事件的传播机制：
                - 在DOM中，事件的传播可以分为三个阶段：
                    1. 捕获阶段 (由祖先元素向目标元素进行事件的捕获)
                    2. 目标阶段 (触发事件的对象)
                    3. 冒泡阶段 (由目标元素向祖先元素进行事件的冒泡)

                - 事件的捕获，指事件从外向内的传导
                    当前元素触发事件以后，会先从当前元素最大的祖先元素开始向当前元素进行事件的捕获

                - 如果希望在捕获阶段触发事件，可以将 addEventListener()的第三个参数设置为 true
                    一般情况下不会启用捕获阶段，因为冒泡阶段使用更广泛（默认行为、简单直观）
                    捕获阶段使用较少（比如用于全局拦截、复杂委托控制）
                    性能差异可以忽略不计，主要是代码逻辑清晰性和意图表达的选择问题
        */
        const box1 = document.getElementById('box1');
        const box2 = document.getElementById('box2');
        const box3 = document.getElementById('box3');
        
        box1.addEventListener('click', () => {
            // alert('box1');
            alert(event.eventPhase);
        }, true);  // 不再是冒泡阶段触发，而是捕获阶段触发

        box2.addEventListener('click', () => {
            alert('box2');
        });

        box3.addEventListener('click', () => {
            alert('box3');
        });
    </script>
</body>
</html>